<template>
  <div class="goodsinfo">
    <div>
      <nut-navbar title="" @on-click-back="back" style="z-index: 1000">
        <a slot="right">编辑</a>
      </nut-navbar>


      <nut-swiper direction="horizontal" :loop="true" :canDragging="false" :paginationVisible="true" ref="demo3">


        <div class="nut-swiper-slide gray" v-for="(t,index) in goodsinfo.goodsimages">
          <img width="100%" :src="t" alt=""> {{ t }}
        </div>

      </nut-swiper>

    </div>
    <div>
      <nut-price :price="goodsinfo.goodsprice" :needSymbol="true" :thousands="false" style="color: #f2270c"/>
      <p>{{ goodsinfo.goodstitle }}</p>
    </div>

    <!--  商品评论-->
    <div style="margin-top: 15px">
      <div class="user" v-for="(item,index) in commentlist">
        <nut-avatar bg-icon bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
        <span>{{ item.userId }}</span>
        <nut-rate :value="item.score" :readOnly="true" style="display: inline-block" :size="18" spacing="0"></nut-rate>
        <span>{{ item.createTime }}</span>
        <p class="pl">
          {{ item.content }} </p>
      </div>
    </div>
    <!--推荐-->
    <div>
      为你推荐
    </div>
    <!--详细介绍-->
    <div class="introdiv">
      商品介绍： <br/>
      <div v-html="goodsinfo.goodsintro"></div>
    </div>
    <!--底部-->
    <footer>
      <p><span>客服</span></p>
      <p><span>购物车</span></p>
      <p>
        <nut-button type="primary" shape="circle" small @click="addCar(1)">加入购物车</nut-button>
      </p>
      <p>
        <nut-button type="lightred" shape="circle" small @click="addCar(2)">立即购买</nut-button>
      </p>
    </footer>
    <Specs @getGoodsInfoId="gmgoods" :show="value" :datalist="goodsinfo"></Specs>
  </div>
</template>

<script>
import Specs from "../components/Specs";

export default {
  name: "goodsinfo",
  data() {
    return {
      goodsinfo: {
        "id": 76,
        "specs": "{\"label\":\"iphone 12\",\"children\":[{\"id\":1000,\"label\":\"红色\",\"children\":[{\"id\":1005,\"label\":\"64G\",\"children\":[{\"id\":1020,\"label\":\"34\",\"children\":[]}]},{\"id\":1006,\"label\":\"128G\",\"children\":[{\"id\":1021,\"label\":\"39\",\"children\":[]}]},{\"id\":1007,\"label\":\"256G\",\"children\":[{\"id\":1022,\"label\":\"43\",\"children\":[]}]}]},{\"id\":1001,\"label\":\"绿色\",\"children\":[{\"id\":1008,\"label\":\"64G\",\"children\":[{\"id\":1023,\"label\":\"35\",\"children\":[]}]},{\"id\":1009,\"label\":\"128G\",\"children\":[{\"id\":1024,\"label\":\"40\",\"children\":[]}]},{\"id\":1010,\"label\":\"256G\",\"children\":[{\"id\":1025,\"label\":\"44\",\"children\":[]}]}]},{\"id\":1002,\"label\":\"蓝色\",\"children\":[{\"id\":1011,\"label\":\"64G\",\"children\":[{\"id\":1026,\"label\":\"36\",\"children\":[]}]},{\"id\":1012,\"label\":\"128G\",\"children\":[{\"id\":1027,\"label\":\"41\",\"children\":[]}]},{\"id\":1013,\"label\":\"256G\",\"children\":[{\"id\":1028,\"label\":\"45\",\"children\":[]}]}]},{\"id\":1003,\"label\":\"白色\",\"children\":[{\"id\":1014,\"label\":\"64G\",\"children\":[{\"id\":1029,\"label\":\"37\",\"children\":[]}]},{\"id\":1015,\"label\":\"128G\",\"children\":[{\"id\":1030,\"label\":\"42\",\"children\":[]}]},{\"id\":1016,\"label\":\"256G\",\"children\":[{\"id\":1031,\"label\":\"46\",\"children\":[]}]}]},{\"id\":1004,\"label\":\"黑色\",\"children\":[{\"id\":1017,\"label\":\"64G\",\"children\":[{\"id\":1032,\"label\":\"38\",\"children\":[]}]},{\"id\":1018,\"label\":\"128G\",\"children\":[{\"id\":1033,\"label\":\"48\",\"children\":[]}]},{\"id\":1019,\"label\":\"256G\",\"children\":[{\"id\":1034,\"label\":\"47\",\"children\":[]}]}]}]}",
        "specstitle": "颜色",
        "goodstitle": "Apple 苹果 iPhone 12 全网通5G手机 黑色 64GB",
        "goodsimages": ["//img14.360buyimg.com/n4/jfs/t1/142156/8/17986/162139/5fd1c6f6E72f80502/49d3bfdb1c7ddb39.jpg", "//img14.360buyimg.com/n4/jfs/t1/140451/19/17907/154119/5fd1c72dE4726129e/ddaff0d67735a88c.jpg", "//img14.360buyimg.com/n4/jfs/t1/152713/31/9074/152945/5fd1c71bEa359f0ed/2263211e9bb70fb2.jpg", "//img14.360buyimg.com/n4/jfs/t1/153568/36/9097/154539/5fd1c703Ea90691e6/cc00cd4588a41fad.jpg", "//img14.360buyimg.com/n4/jfs/t1/142118/20/17938/157155/5fd1c70fE67ab1137/f56dc3c6ff10c140.jpg"],
        "goodsintro": "<img scr=\"//img30.360buyimg.com/popWareDetail/jfs/t1/127657/29/15475/98562/5f8ece7dE2f60eeed/3cc016dc2c7f30aa.jpg!q70.dpg.webp\">",
        "goodsprice": 5899,
        "goodtypesinfoId": null
      },
      commentlist: {},
      value: false,
      xuanzeinfo: {},
      gmgwc: 0,
      goodsInfos: [],
    };
  },
  components: {Specs},
  methods: {
    gmgoods(info) {
      this.xuanzeinfo = info;
      if (this.gmgwc == 1)//购物车
      {
        const shoppingcart = {
          "goodsId": this.goodsinfo.id,
          "goodsinfoId": info.goodsinfo.id,
          "userId": this.$cookies.get("userid"),
          "number": info.number,
        }

        this.$axios.post("/shoppingcart/save", shoppingcart).then(
            res=>{

              this.$notify.success('添加成功');

            }
        )

      } else if (this.gmgwc == 2)//购买
      {

        const goods = {
          "id": info.goodsinfo.id,
          "goodsId": this.goodsinfo.id,
          "name": this.goodsinfo.goodstitle,
          "number": info.number,
          "image":info.goodsinfo.image ,
          "price": info.goodsinfo.price,
          "obj2": 2,
        }
        this.goodsInfos.push(goods);
        this.$router.push({path:"/createOrder",query:{"goodsInfos":JSON.stringify(this.goodsInfos)}});
      }
    },
    addCar(x) {
      this.gmgwc = x;
      this.value = false;
      setInterval(() => {
        this.value = true;
      }, 1)
    },
    back: function () {
      window.history.back();
    },
    getData() {
      var goodsid = this.$route.query.goodsId;
      var params = new URLSearchParams();
      params.append('id', goodsid);
      this.$axios.get('/goods/selectOne', {params: params}).then(
          res => {

            if (res.status == 200) {
              this.goodsinfo = res.data;
            }
          }
      );
      this.$axios.get('/comment/selectBygoodsId', {params: params}).then(
          resg => {

            this.commentlist = resg.data;
          }
      );

      var tt = JSON.parse("[{\"label\":\"iphone 12\",\"children\":[{\"id\":1000,\"label\":\"红色\",\"children\":[{\"id\":1005,\"label\":\"64G\",\"children\":[{\"id\":1020,\"label\":\"34\",\"children\":[]}]},{\"id\":1006,\"label\":\"128G\",\"children\":[{\"id\":1021,\"label\":\"39\",\"children\":[]}]},{\"id\":1007,\"label\":\"256G\",\"children\":[{\"id\":1022,\"label\":\"43\",\"children\":[]}]}]},{\"id\":1001,\"label\":\"绿色\",\"children\":[{\"id\":1008,\"label\":\"64G\",\"children\":[{\"id\":1023,\"label\":\"35\",\"children\":[]}]},{\"id\":1009,\"label\":\"128G\",\"children\":[{\"id\":1024,\"label\":\"40\",\"children\":[]}]},{\"id\":1010,\"label\":\"256G\",\"children\":[{\"id\":1025,\"label\":\"44\",\"children\":[]}]}]},{\"id\":1002,\"label\":\"蓝色\",\"children\":[{\"id\":1011,\"label\":\"64G\",\"children\":[{\"id\":1026,\"label\":\"36\",\"children\":[]}]},{\"id\":1012,\"label\":\"128G\",\"children\":[{\"id\":1027,\"label\":\"41\",\"children\":[]}]},{\"id\":1013,\"label\":\"256G\",\"children\":[{\"id\":1028,\"label\":\"45\",\"children\":[]}]}]},{\"id\":1003,\"label\":\"白色\",\"children\":[{\"id\":1014,\"label\":\"64G\",\"children\":[{\"id\":1029,\"label\":\"37\",\"children\":[]}]},{\"id\":1015,\"label\":\"128G\",\"children\":[{\"id\":1030,\"label\":\"42\",\"children\":[]}]},{\"id\":1016,\"label\":\"256G\",\"children\":[{\"id\":1031,\"label\":\"46\",\"children\":[]}]}]},{\"id\":1004,\"label\":\"黑色\",\"children\":[{\"id\":1017,\"label\":\"64G\",\"children\":[{\"id\":1032,\"label\":\"38\",\"children\":[]}]},{\"id\":1018,\"label\":\"128G\",\"children\":[{\"id\":1033,\"label\":\"48\",\"children\":[]}]},{\"id\":1019,\"label\":\"256G\",\"children\":[{\"id\":1034,\"label\":\"47\",\"children\":[]}]}]}]}]");
    }
  },
  mounted() {
    this.getData();
  },
  beforeUpdate() {

  },
  beforeCreate() {

  }
}
</script>

<style scoped>
>>> .nut-navbar {
  background: none;
  position: fixed;
  width: 100%;
  top: 0;
  opacity: 0.5;
}

>>> .nut-swiper {
  top: 0;
  height: 375px;
}

.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.goodsinfo {
  background: #ffffff;
}

>>> .nut-swiper-slide > img {
  width: 100%;
}

.introdiv {
  width: 100vw;
  overflow: hidden;
  margin-bottom: 60px;
}

>>> .introdiv img {
  width: 98%;
}

footer {
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0px;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  z-index: 100;
}


</style>
